<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { usePageStore } from '@/stores/counter'
usePageStore().setTitle('算网拓扑')

const currentTime = ref(new Date())

const formatDate = computed(() => {
  const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }
  return currentTime.value.toLocaleDateString('zh-CN', options)
})

const formatTime = computed(() => {
  return currentTime.value.toLocaleTimeString('zh-CN', { hour12: true })
})

let timer: number | null | undefined = null

onMounted(() => {
  timer = setInterval(() => {
    currentTime.value = new Date()
  }, 1000)
})

onBeforeUnmount(() => {
  clearInterval(timer)
})

</script>

<template>
  <header>
      <div class="title">北方算网北电云伊吾机房-{{ usePageStore().title }}</div>
				<div class="time">
					<div class="clock">
						{{formatTime}}
					</div>
					<div class="date">
						{{formatDate}}
					</div>
				</div>
    </header>
</template>
<style lang="css" scoped>
header {
  color: #64ffda;
  line-height: 1.5;
  height: 60px;
  max-height: 100vh;
  background-image: url('@/assets/img/bg_header.png');
  background-repeat: no-repeat;
  background-position: center;
}
.title {
  text-align: center;
  font-size: 1.7rem;
}
.time {
  position: absolute;
  top: 0;
  right: 20px;
  text-align: right;
  font-size: 14px;
}
.logo {
  display: block;
  margin: 0 auto 2rem;
}
</style>
